<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <el-row>
          <span>{{ detailData._type }}报价单：{{ detailData.offer_no }}</span>
        </el-row>
      </div>
      <el-row class="mr_vertical_10" type="flex" justify="center">
        <el-progress
          type="circle"
          :percentage="detailData._progress"
        ></el-progress>
      </el-row>
      <el-row class="mr_vertical_10">
        <el-form label-width="120px">
          <el-form-item label="报价单号：">
            {{ detailData.offer_no }}
          </el-form-item>
          <el-form-item label="交易周期：">{{ detailData.tpno }}</el-form-item>
          <el-form-item label="报价类型：">
            {{ detailData._type }}
          </el-form-item>
          <el-form-item label="数量（度）：">
            {{ detailData.quantity }}
          </el-form-item>
          <el-form-item label="价格（元）：">
            {{ $coinToYuan(detailData.price) }}
          </el-form-item>
          <el-form-item label="信誉值：">
            {{ detailData.min_credit }}
          </el-form-item>
          <el-form-item label="发布时间：">
            {{ detailData._showTime }}
          </el-form-item>
          <el-form-item label="状态：">{{ detailData._status }}</el-form-item>
          <el-form-item label="区块链交易ID：">
            {{ detailData.txid }}
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import Purchase from "./purchase.vue";
import Page from "@/components/page.vue";
@Component({
  components: {
    Page,
    Purchase,
  },
})
export default class MyApplication extends Vue {
  @Prop()
  protected detailData!: any;

  protected formData: any = {
    type: null,
    created_at: null,
    _type: null,
    _status: null,
    _showTime: null,
    offer_no: null,
  };

  @Watch("detailData", { immediate: true, deep: true })
  protected async init() {
    this.$set(
      this.detailData,
      "_showTime",
      Vue.prototype.$fmtDate(this.detailData.created_at)
    );

    if (this.detailData.type === "sale") {
      this.$set(this.detailData, "_type", "售电");
    } else {
      this.$set(this.detailData, "_type", "购电");
    }
    if (this.detailData.status === "active") {
      this.detailData._status = "交易中";
    } else if (this.detailData.status === "canceled") {
      this.detailData._status = "已取消";
    } else if (this.detailData.status === "done") {
      this.detailData._status = "已完成";
    }
    if (!this.detailData.order_stat) {
      this.$set(this.detailData, "_progress", 0);
    } else {
      this.detailData._progress =
        Math.round((this.detailData.order_stat.total_qty / this.detailData.quantity) * 100 * 100) / 100;
    }
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
/deep/ .el-form-item__label {
  padding: 0;
}
</style>


